<template>
  <div class="content-box">
    <heading class="title" grade="1">赛事签表 
      <small v-if="playRound>2" v-bind:class="{active:isSemifinal==false}" @click="isSemifinal = false">大签表</small> 
      <small 
        v-bind:class="{active:isSemifinal==true}"  @click="isSemifinal = true"
        v-if="playRound==7 || playRound==6 || playRound==5 || playRound==2" >
        半决赛
      </small>
    </heading>

    
    <template v-if="bigTableVisible && (isSemifinal == false)">
      <div v-if="zoneNumber > 1">
        <ul class="clearfix">
          <li class="area" v-bind:class="{active:index == areaIndex}" @click="handleActive(index)"
            v-for="(item,index) in 4" :key="item" >
            {{index+1}}/4区
          </li>
        </ul>
      </div>       
      <ul class="round clearfix">
        <li class="round" v-for="item in roundList" :key="item" v-bind:style="{width: (1/roundList.length *100)+'%'}">
          {{item}}
        </li>
      </ul>

      <div class="clearfix check-tb">        
        <ul class="fl" v-for="item in dataList" :key="item" v-bind:style="{width: (1/dataList.length *100)+'%'}">
          <li v-for="game in item.matchScheduleResp" :key="game.id" class="relative game-item">
            <el-row>
              <el-col :span="20" class="center">
                <div class="clearfix player-item" v-if="game.hostUserId">
                  <span class="seed-number" v-if="game.hostSeedValue && game.hostSeedValue!=10000">
                    {{game.hostSeedValue || ''}}
                  </span>
                  <span class="player hidden" v-if="!game.guestUserName.length && item.grade ==1">
                    {{game.hostUserName || game.hostUserId }}(轮空) 
                  </span>
                  <span class="player hidden" v-else
                    v-bind:class="{champion:item.grade == playRound && (Number(game.homeScore) > Number(game.guestScore)) }">
                    {{game.hostUserName || game.hostUserId}} 
                  </span>
                </div>
                <p class="vs" v-if="game.hostUserId && game.guestUserId && (!game.homeScore) && game.status==1">vs</p>
                <p class="cancel" v-if="game.status == 4">已取消</p>
                <p class="vs score" v-if="game.homeScore && game.guestScore">{{game.homeScore}} - {{game.guestScore}}</p>
                <div class="clearfix player-item" v-if="game.guestUserId"> 
                  <span class="seed-number" v-if="game.guestSeedValue && game.guestSeedValue!=10000">
                    {{game.guestSeedValue || ''}}
                  </span>
                  <span class="player hidden" 
                    v-bind:class="{champion:item.grade == playRound && (Number(game.homeScore) < Number(game.guestScore)) }">
                    {{game.guestUserName || game.guestUserId || '轮空'}}
                  </span>
                </div>                
              </el-col>      
            </el-row> 
            <el-button 
              v-if="game.hostUserId && game.guestUserId && (game.status != 4)" 
              size="small score-btn" class="orange-btn scorebtn" @click="openScore(game)">
              {{(game.homeScore||game.guestScore) ? '修改比分': '录入比分'}}
            </el-button>
          </li>
        </ul>
      </div>
    </template>

    <template v-else>      
      <semifinal  
        :dataList="semiList"
        v-on:scoreWrite="openScore">
      </semifinal>        
    </template>

    <heading class="title" grade="1">赛程</heading>
      <!--赛程日期-->
      <date-slider v-model="activeIndex" :list="dateList" @change="handleCheck"/>
       <div v-if="matchList.length">
          <!--赛程场地-->
          <place-group :list="matchList" v-model="selectedIndex" @change="handleSelect"/>
          <ul class="match-list small">
            <li v-for="(item,$index) in gameList" class="match-item  clearfix" 
                v-bind:class="{odd:$index%2==0}"
                :key="item">
                <el-row>
                  <el-col :span="4" class="match-date">
                    <p>{{new Date(item.startTime).format("yyyy-MM-dd hh:mm")}}</p>
                    <p v-if="item.grade == playRound">决赛</p>
                    <p v-else-if="playRound - item.grade == 1">半决赛</p>
                    <p v-else-if="playRound - item.grade == 2">1/4决赛</p>
                    <p v-else>第{{item.grade}}轮</p>
                  </el-col>
                  <el-col :span="2" class="logo">
                     <x-img  :src="item.hostIconUrl"/>
                  </el-col>
                  <el-col :span="4">
                    <div class="team">
                      <div class="host tm-name">
                          <p>{{item.hostUserName || '待定'}}
                            <span v-if="item.hostSeedValue && item.hostSeedValue!=10000" class="seed-number inner">{{item.hostSeedValue}}</span>
                          </p>
                          <template v-if="item.status==6 && Number(item.homeScore)==0">
                            <div class="giveup">已弃权</div>
                          </template>                          
                          <el-button type="link" 
                            v-if="item.hostUserName && (!item.homeScore) && item.status!==4 && item.status!==6"
                            @click="giveUp($event, item,'host')">弃权</el-button>
                      </div>
                    </div>
                  </el-col>                  
                  <el-col :span="3">
                    <div class="match-vs">
                      <p v-if="!item.homeScore && (!item.guestScore)" class="match-vers">vs</p>
                      <p v-if="item.end|| item.guestScore" class="match-vers">{{item.homeScore}}:{{item.guestScore}}</p>
                    </div>
                  </el-col>
                  <el-col :span="2"  class="logo">
                      <x-img :src="item.guestIconUrl" />
                  </el-col>
                  <el-col :span="4">
                    <div class="team">
                      <div class="tm-name">
                          <p>
                            {{item.guestUserName  || '待定'}}
                            <span class="seed-number inner" v-if="item.guestSeedValue && item.guestSeedValue!=10000">{{item.guestSeedValue}}</span>
                          </p>
                          <template v-if="item.status==6 && item.guestScore==0">
                            <div class="giveup">已弃权</div>
                          </template> 
                          <el-button v-if="item.guestUserName && (!item.homeScore) && item.status!==4 && item.status!==6" 
                            type="link"  @click="giveUp($event, item,'guest')">弃权</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <!--status: 0、初始化（2轮以上赛事默认使用），1、待比赛，2、已结束，3、延迟比赛，4、取消比赛，5轮空-->
                    <div v-if="item.status!==4 &&  item.status!==6">
                      <el-button v-show="!item.homeScore" class="tiny" size="small" @click="editGame(item)">编辑比赛</el-button>
                      <el-button v-show="!item.homeScore && (playRound - item.grade) > 1" class="tiny" size="small" @click="showCancel(item)">取消比赛</el-button>                                          
                    </div>
                    <div v-if="item.status==4">
                      <span  class="canceled">已取消</span>
                    </div>
                    <div v-if="item.status==6">
                      <template v-if="item.remark">
                        <span class="canceled">{{item.remark}}</span>
                      </template>
                      <template v-else>
                        <span class="canceled" v-if="item.homeScore==0">主队弃权</span>
                        <span class="canceled" v-if="item.guestScore==0">客队弃权</span>
                      </template>                      
                    </div>
                  </el-col>
                </el-row>                
            </li>
           </ul>
           <div class="button-box">
             <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
           </div>
        </div>

        <div class="no-match" v-else>
            没有比赛
        </div>

      


      <!--录入大比分弹框-->
      <Dialog
        :visible="scoreVisible"
        :title="'请输入最终比分'"
        :cancelText="'取消'"
        :sureText="'确认'"
        v-on:cancel="closeScore()"
        v-on:confirm="scoreWrite()"
        v-on:close="closeScore()">
        <div class="relative">
          <div style="margin-bottom:10px;">
            <label class="game-name hidden">{{game.hostUserName || game.hostUserId}}</label>
            <el-input class="score-input" v-model="homeScore" :maxlength="3">
              <template slot="append">分</template>
            </el-input>
          </div>
          <div>
            <label class="game-name hidden">{{game.guestUserName || game.guestUserId}}</label>
            <el-input class="score-input" v-model="guestScore" :maxlength="3">
              <template slot="append">分</template>
            </el-input>
          </div>
        </div>
      </Dialog>
      
      

      <!-- 取消比赛弹框 --> 
      <Dialog 
        :visible="cancelVisible"
        :title="'请选择取消比赛的原因'"
        :cancelText="'取消'"
        :sureText="'确认'"
        v-on:cancel="hideMessageBox()"
        v-on:confirm="cancelGame()"
        v-on:close="hideMessageBox()">
        <el-radio-group v-model="cancelCase">
          <el-radio v-for="item in cancelOptions" :key="item.value" class="radio" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
        <el-row style="margin-top:10px;">
          <el-col :span="3">
            <label>备注</label>
          </el-col>
          <el-col :span="21">
            <el-input  type="textarea" :rows="2"  placeholder="请输入备注"  v-model="remark">
            </el-input>
          </el-col>
        </el-row>  
      </Dialog>

  </div>
</template>

<script>
import Api from 'api/race'
import Semifinal from './components/Semifinal'
import DateSlider from './components/DateSlider'
import PlaceGroup from './components/PlaceGroup'
import Dialog from '../components/Dialog'
import {calcRound, downloadFile} from 'utils'
import {mapGetters} from 'vuex'
export default {
  components: {
    Semifinal,
    DateSlider,
    PlaceGroup,
    Dialog
  },
  computed: {
    ...mapGetters({
      race_detail: 'race_detail'
    })
  },
  created () {
    this.getDrawData()
    this.getPreview()
  },
  data () {
    return {
      popVisible: false,
      isSemifinal: false,
      scoreVisible: false,
      cancelVisible: false,
      bigTableVisible: false,
      canceledGame: {},
      playRound: 2,
      game: {},
      homeScore: '',
      guestScore: '',
      dataList: [], // 展示的签表
      areaIndex: 0, // 分区展示的id
      roundList: [], // 轮次标题列表
      dateList: [], // 日期列表
      gameList: [], // 比赛对阵列表
      matchList: [], // 比赛场地编号
      semiList: [], // 半决赛对阵列表
      checkTableList: [], // 总的签表列表
      activeIndex: {}, // 日期选择的索引
      selectedIndex: 0, // 场地编号选中索引
      cancelCase: 0, // 取消原因
      remark: '',  // 备注
      cancelOptions: [
        {label: '天气不好', value: 0},
        {label: '场地安排原因', value: 1},
        {label: '其他', value: 2}
      ]
    }
  },
  methods: {
    // 日期选择事件
    handleCheck (obj) {
      var item = obj || new Date().format()
      if (item.matchNumber > 0) {
        this.getScheduleInfo(item.scheduleDate)
      } else {
        this.gameList = []
        this.matchList = []
      }
    },
    // 获取赛程预览导航栏
    getPreview () {
      Api.getSchedulePreview({matchId: this.$route.query.id}, this).then((data) => {
        this.dateList = data.data || []
        if (this.dateList.length) {
          this.activeIndex = this.dateList[0]
          this.getScheduleInfo(this.activeIndex.scheduleDate)
        }
      })
    },
    // 获取某一天的赛程信息
    getScheduleInfo (date) {
      Api.getScheduleInfo({
        matchId: this.$route.query.id,
        day: date
      }, this).then((data) => {
        this.matchList = data.data
        this.gameList = this.matchList[0].matchScheduleResp
        this.selectedIndex = 0
      })
    },
    hideMessageBox () {
      this.cancelVisible = false
    },
    // 弹出取消比赛弹框
    showCancel (item) {
      this.canceledGame = item
      this.cancelVisible = true
    },
    // 计算有多少轮
    calcRound () {
      this.roundList = calcRound(this.playRound)
    },
    // 选中分区tab事件
    handleActive (index) {
      this.areaIndex = index
      this.dataList = this.checkTableList[index].grades
      this.handleSort()
    },
    // 打开录入比分弹框
    openScore (item) {
      this.scoreVisible = true
      this.game = item
    },
    // 关闭弹框并重置主队客队比分
    closeScore () {
      this.scoreVisible = false
      this.homeScore = ''
      this.guestScore = ''
    },
    // 比分录入
    scoreWrite () {
      if ((Number.isInteger(parseInt(this.homeScore))) && (Number.isInteger(parseInt(this.guestScore))) &&
        parseInt(this.homeScore) !== parseInt(this.guestScore) &&
        parseInt(this.homeScore) >= 0 && parseInt(this.guestScore) >= 0) {
        Api.scoreWrite({
          id: this.game.id,
          hostScores: this.homeScore,
          guestScores: this.guestScore
        }, {context: event.target}).then((res) => {
          setTimeout(() => {
            this.game.homeScore = this.homeScore
            this.game.guestScore = this.guestScore
            this.getDrawData()
            var theday = new Date(this.game.startTime).format()
            this.getScheduleInfo(theday)
            for (var i = 0, l = this.dateList.length; i < l; i++) {
              if (this.dateList[i].scheduleDate === theday) {
                this.activeIndex = this.dateList[i]
              }
            }
            this.closeScore()
            this.popVisible = false
          }, 100)
        }).catch((err) => {
          this.$message({
            type: 'warning',
            message: err.msg
          })
        })
      } else {
        this.$message({
          type: 'error',
          message: '比分请输入非负整数,且不能为平局'
        })
        return false
      }
    },
    // 场地tab切换
    handleSelect (index) {
      this.selectedIndex = index
      this.gameList = this.matchList[index].matchScheduleResp
    },
    // 获取签表数据
    getDrawData () {
      Api.getDrawData({matchId: this.$route.query.id}).then((res) => {
        this.zoneNumber = res.data.length
        if (this.zoneNumber > 1) { // 有分区,球队>=32
          this.checkTableList = res.data
          if (res.data[4]) {
            this.playRound = res.data[4].grades[1].grade
            this.semiList = res.data[4].grades
          }
        } else {
          this.playRound = res.data[0].grades.length
          if (this.playRound === 2) { // 4支
            this.semiList = res.data[0].grades
            this.isSemifinal = true
          }
          if (this.playRound === 3) { // 8支
            this.isSemifinal = false
          }
          if (this.playRound === 4) { // 16支
            this.semiList = res.data[0].grades.filter(item => {
              return item.grade > 2
            })
          }
        }
        this.bigTableVisible = this.playRound > 2
        this.dataList = res.data[this.areaIndex].grades
        this.handleSort()
        this.calcRound()
      })
    },
    // 比赛弃权
    giveUp (event, item, team) {
      let isHost = team === 'host' ? 1 : 0
      let text = isHost ? '主队：' + item.hostUserName : '客队：' + item.guestUserName
      this.$confirm('确认 ' + text + ' 弃权?', '提示', {
        type: 'warning'
      }).then(() => {
        Api.matchGiveup({
          id: item.id,
          hostUserId: item.hostUserId,
          guestUserId: item.guestUserId,
          status: 6,  // 4：取消比赛，5：轮空，6：弃权
          result: isHost ? 3 : 4 // 3：主队弃权，4：客队弃权
        }, {context: event.target}).then((res) => {
          item.end = 1
          item.status = 6
          item.homeScore = res.data.hostScore
          item.guestScore = res.data.guestScore
          this.getDrawData()
        }).catch((err) => {
          this.$message({
            type: 'warning',
            message: err.msg
          })
        })
      })
    },
    // 取消比赛
    cancelGame () {
      Api.matchCancel({
        id: this.canceledGame.id,
        cancleCase: this.cancelOptions[this.cancelCase].label,
        remark: this.remark
      }, {context: this}).then((res) => {
        this.canceledGame.status = 4
        this.remark = ''
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
        this.hideMessageBox()
        let ind = this.dateList.indexOf(this.activeIndex)
        if (ind >= 0) {
          this.dateList[ind].matchNumber--
        }
        this.getDrawData()
      }).catch((err) => {
        this.$message({
          type: 'warning',
          message: err.msg
        })
        this.hideMessageBox()
      })
    },
    // 进入编辑比赛页面
    editGame (item) {
      if (!item.hostUserName) {
        item.hostUserName = '待定'
      }
      if (!item.guestUserName) {
        item.guestUserName = '待定'
      }
      this.$store.commit('MATCH_DETAIL', item)
      this.$router.push({
        path: '/race/detail/manage/matchedit',
        query: {
          id: this.$route.query.id,
          gameId: item.id,
          isRun: this.$route.query.isRun,
          tasktype: this.$route.query.tasktype
        }
      })
    },
    exportExcel () {
      var url = '/api/match/schedule/export/schedulePrevInfo?matchId=' + this.$route.query.id // + '&day=' + this.activeIndex.scheduleDate
      var _this = this
      downloadFile(url, this.race_detail.matchName + '.xls', function (blob) {
        _this.$message({
          message: '下载出错，请稍后再试',
          type: 'warning'
        })
      })
    },
    handleSort () {
      this.dataList.sort(function (a, b) {
        return a.grade - b.grade
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/var.scss';
/* 比赛列表 */
@import '../../styles/scheduleEdit.scss';
@import '../../styles/checktable.scss';   
p.score{
  font-size: 16px;
  padding-left: 18%;
  color: #666;
}
.logo{
  text-align: right;
  img{
    margin:0;
  }
}
.cancel{
  text-align:left;
  padding-left:24px;
}
.champion:after{
  content:url('/static/images/champion.png');
}
</style>
